<template>
	<view>
		<view class="en-ul">
			<view class="ptb10 bdb_1e plr15" v-for="(item,index) in enList" :key="index">
				<view class="flex between alcenter">
					<view class="flex flex flexend">
						<text
							:class="['ft14 redColor',{'greenColor':item.status=='Y'}]">{{item.status=='Y'?$t('bico.W560') : $t('bico.W561')}}</text>
						<text class="gray4 pl10">{{item.createTime}}</text>
					</view>
					<view class="blueColor bgBlack radius2 plr20 ptb5" @click="showModel(item)">{{$t('bico.W562')}}</view>
				</view>
				<view class="mt15 flex">
					<view class="flex1">
						<text class="gray4">{{$t('trade.price')}}({{item.coin}})</text>
						<view class="mt5">{{item.unitPrice}}</view>
					</view>
					<view class="flex1 tc">
						<text class="gray4">{{$t('bico.W563')}}</text>
						<view class="mt5">{{item.totalPrice }}</view>
					</view>
					<view class="flex1 tr">
						<text class="gray4">{{$t('bico.W564')}}</text>
						<view class="mt5">{{payMap[item.payMethod]}}</view>
					</view>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="14" z-index='5'>
			<view class="list_details">
				
				<u-row gutter="16" justify="between">
					<u-col span="4">
						<view class="tpc rtc" v-if="pageType == 0"><span>{{$t('bico.W565')}}USDT</span></view>
						<view class="tpc rtc" v-else><span>{{$t('bico.W566')}}USDT</span></view>
					</u-col>
				</u-row>
				
				<u-row gutter="16" justify="between">

					<u-col span="8">
						<view class="tpc rtclk" v-if="pageType == 0"><span>{{$t('bico.W567')}}</span></view>
						<view class="tpc rtclk" v-else><span>{{$t('bico.W568')}}</span></view>
					</u-col>
					<u-col span="4" text-align="right">
						<view class="" :class="detail.status == 'Y' ? 'greenColor' : 'redColor'">
							{{detail.status=='Y'?$t('bico.W560') : $t('bico.W561')}}
						</view>
					</u-col>
				</u-row>
				<u-line color="#5559691f"></u-line>
				<u-row gutter="16" justify="between">
					<u-col span="4">
						<view class="tpc">
							{{$t('bico.W569')}}
						</view>
					</u-col>
					<u-col span="8" text-align="right">
						<view class="tit">
							{{detail.number}} {{detail.coin}}
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="between">
					<u-col span="4">
						<view class="tpc">
							{{$t('bico.W570')}}
						</view>
					</u-col>
					<u-col span="8" text-align="right">
						<view class="tit">
							${{detail.totalPrice}}
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="between">
					<u-col span="4">
						<view class="tpc">
							{{pageType == 1 ? this.$t('bico.W565') : this.$t('bico.W566')}}{{$t('bico.W571')}}
						</view>
					</u-col>
					<u-col span="8" text-align="right">
						<view class="tit">
							${{detail.unitPrice}}
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="between">
					<u-col span="4">
						<view class="tpc">
							{{$t('bico.W572')}}
						</view>
					</u-col>
					<u-col span="8" text-align="right">
						<view class="tit">
							{{detail.restNumber}} USDT
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="between">
					<u-col span="4">
						<view class="tpc">
							{{$t('bico.W573')}}
						</view>
					</u-col>
					<u-col span="8" text-align="right">
						<view class="tit">
							{{detail.lowPrice}}-{{detail.restNumber * detail.unitPrice}} USD
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="between">
					<u-col span="3">
						<view class="tpc">
							{{$t('bico.W574')}}
						</view>
					</u-col>
					<u-col span="8" text-align="right">
						<view class="tit">
							<span>{{detail.orderNo}}</span>
							<i @click="handleCopy(detail.orderNo)">{{$t('bico.W575')}}</i>
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="between">
					<u-col span="4">
						<view class="tpc">
							{{$t('bico.W576')}}
						</view>
					</u-col>
					<u-col span="8" text-align="right">
						<view class="tit">
							{{payMap[detail.payMethod]}}
						</view>
					</u-col>
				</u-row>
				<u-row gutter="16" justify="between">
					<u-col span="4">
						<view class="tpc">
							{{$t('bico.W577')}}
						</view>
					</u-col>
					<u-col span="8" text-align="right">
						<view class="tit">
							{{detail.createTime}}
						</view>
					</u-col>
				</u-row>
				<u-button type="success" @click="cancelFun" v-if="detail.status == 'Y'">{{$t('bico.W578')}}</u-button>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		otcOrderList,
		cancelOrder
	} from '../../common/apiString.js'
	export default {
		data() {
			return {
				detail: {},
				show: false,
				enList: [],
				pageType: 0, // 0买0卖
				//方式
				wayMap: {
					"0": this.$t('bico.W565'),
					'1': this.$t('bico.W566'),
				},
				//买卖家
				perMap: {
					"0": this.$t('bico.W579'),
					'1': this.$t('bico.W580'),
				},
				payMap: {
					"ALI_PAY": this.$t('bico.W581'),
					"WE_CHAT": this.$t('bico.W582'),
					"BANK": this.$t('bico.W583'),
				}
			}
		},
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.pageType = option.type
			// console.log(option.orderNo); //打印出上个页面传递的参数。
			uni.setNavigationBarTitle({
				title:this.$t('bico.W585'),
			})

		},
		onShow() {
			this.getList()
		},
		methods: {
			showModel(item) {
				this.detail = item
				this.show = true
			},
			cancelFun() {
				// uni.showModal({
				// 	title: '撤销订单',
				// 	content: '',
				// 	showCancel: true,
				// 	confirmColor: '#f55850',
				// 	cancelColor: '#39B54A',
				// 	success: function(res) {
				// 		if (res.confirm) {
				// uni.showLoading()
				this.$utils.initDataToken({
					url: cancelOrder,
					data: {
						pageType: this.pageType == 0 ? 'BUY' : 'SELL',
						orderNo: this.detail.orderNo,
					},
					type: 'post'
				}, (res, msg) => {
					// uni.hideLoading()
					this.$utils.showLayer(this.$t('bico.W584'),);
					this.show = false
					this.getList()
				})
				//console.log('用户确定');
				// 		} else if (res.cancel) {
				// 			console.log('用户取消');
				// 		}
				// 	}
				// });

			},
			handleCopy(txt) {
				uni.setClipboardData({
					data: txt,
					success: function () {
						that.$utils.showLayer(that.$t('assets.copy_success'))  
					},fail:function() {
						that.$utils.showLayer(that.$t('assets.copy_err')) 
					}
				});
			},
			getList() {
				this.$utils.initDataToken({
					url: otcOrderList,
					data: {
						pageType: this.pageType == 0 ? 'BUY' : 'SELL',
						size: 10,
						current: 1,
					},
					type: 'post'
				}, (res, msg) => {
					this.enList = res.records
				})
			}
		}
	}
</script>

<style>
	.u-row {
		margin: 2vw 0;
		    width: 84vw;
		    height: 10vw;
	}

	.tit uni-image {
		width: 5px;
		height: 10px;
		/* position: relative; */
		top: 0vw;
		text-align: right;
		/* right: -26vw; */
		color: #b7b8bd;
		font-size: 3vw;
	}

	.rtc {
		font-size: 4vw;
		font-weight: 700;
	}
	.rtclk {
		    font-size: 18px;
		    font-weight: 400;
	}
	
	.adc{
		text-align: right;
	}

	.list_details {
		padding: 10px 10px 15px 10px;
	}

	.greenColor {
		color: #44BCA7;
	}

	.redColor {
		color: #CD3D58;
	}
</style>
